<template>
	<view class="page-container">
		<view class="padded-15">
			<view class="font-16 padded-5">产品列表</view>
			<view class="page-list">
				
				<view v-for="(item, index) in qylist" :key="index" class="list-item">
					<view class="clearfix">
						<view class="pull-left font-18 font-weight-bold">{{ item.cpname }}</view>
						<view class="pull-right color-B1B8C7">{{ item.fkjg }}</view>
					</view>
					<view class="clearfix padded-t-10">
						<view class="pull-left">放款额度</view>
						<view class="pull-right">
							<text>{{ item.dkje }}</text>
							<text>元</text>
						</view>
					</view>
					<view class="clearfix padded-t-5">
						<view class="pull-left">年化利率</view>
						<view class="pull-right">
							<text>{{ item.dklx }}</text>
							<text>%</text>
						</view>
					</view>
					<view class="clearfix padded-t-5">
						<view class="pull-left">分期数</view>
						<view class="pull-right">
							<text>{{ item.hkqs }}期</text>
						</view>
					</view>
					<view class="clearfix padded-t-5">
						<view class="pull-left">是否参与管理</view>
						<view class="pull-right" style="position: relative;">
							<switch style="transform:scale(0.5); position: absolute; top: -5px; right: -15px;" :checked="switchStates[index]" @change="ismr($event,item.id)"  />
						</view>
					</view>
					
					<view class="clearfix">
						<view class="pull-left" style="width: 90px;">
							<view @click="del(item.id)" class="product-button margin-t-15 color-F54966">
								删除
							</view>
						</view>
						<view class="pull-left padded-l-5" style="width: calc(100% - 90px);">
							<view @click="toapplyformid(item.id)" class="product-button margin-t-15">
								编辑
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="padded-t-5">
				<button type="primary" class="font-14" @click="toapplyform">新增</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.getServerData();
		},
		onShow() {
			this.getServerData();
		},
		data() {
			return {
				qylist: [],
				switchStates: [],
			}
		},
		onReady() {
				
		},
		methods: {
			getServerData() {
				this.$request().then(res => {
					// 验证登入
				})
				
				// 使用 GET 方法请求数据
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/cpxqlist', // 请求地址
				    success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.qylist = res.data.data;
							this.updateSwitches();
						}
			
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			del(id){
				uni.showModal({
					title: '提示',
					content: '确认删除？',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确定", // 确认按钮文字  
					success: function(res) {
						console.log(res)
						if (res.confirm) {
							//console.log(id);
							uni.request({
							    url: 'https://wn.wdyky.com/index/jrgl/cpxqdel', // 请求地址
							    data: {
							    	id: id,
							    },
								success: (res) => {
							        // 请求成功的回调函数
							        console.log('请求成功:', res.data);
									if(res.data.code == 1){
										this.getServerData();
										uni.showToast({
											icon: 'none',
											title: res.data.val
										})
									}
							    },
							    fail: function(err) {
							        // 请求失败的回调函数
							        console.error('请求失败:', err);
							    }
							});
							
						} else if (res.cancel) {
						 // 用户点击取消
						 //console.log('用户取消删除');
						}
					}.bind(this)
				})
			},
			ismr(e,id){
				console.log('id:', e.detail.value);
				
				if(e.detail.value == false){
					var gltype = 0;
				}else{
					var gltype = 1;
				}
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/glzt', // 请求地址
				    data: {
				    	id: id,
						gltype: gltype,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							//this.getServerData();
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			updateSwitches() {
			    this.switchStates = this.qylist.map(item => item.gltype); // 假设接口返回的每个项目对象中有一个isActive字段表示状态
			},
			toapplyform(){
				uni.navigateTo({
				    url: '/pages/product/applyform'
				});
			},
			toapplyformid(id){
				uni.navigateTo({
				    url: '/pages/product/applyform?id='+id
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	
	.page-list {
		padding-top: 10px;
		
		.list-item {
			background-color: #FFFFFF;
			padding: 15px;
			border-radius: 10px;
			margin-bottom: 10px;
			box-shadow: 0 0 2px 2px rgba(242, 242, 242, 0.7);
			
			.product-button {
				text-align: center;
				border: 1px solid #E6E9F0;
				border-radius: 5px;
				padding: 5px;
				color: #3679FF;
				box-shadow: 0 0 2px 2px rgba(247,247,247, 0.7);
			}
		}
	}
</style>
